<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>富文本编辑器</title>
    <link rel="stylesheet" href="../plugins/layui/src/css/layui.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app1" style="height: auto;">

    <el-header style="margin-left: 180px;">
        <h1>按照规则批量生成SQL语句 Generate SQL statements in batches</h1>
    </el-header>

    <el-form name="sqlForm" :model="sqlExcute" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
        <el-form-item label="表名" prop="name" style="width: 800px">
            <el-input v-model="sqlExcute.tableName"></el-input>
        </el-form-item>

        <el-form-item label="条件字段集合" prop="name" style="width: 800px">
            <el-input v-model="sqlExcute.whereFields" placeholder="[英文逗号“,”分割,例如:'字段1','字段2']可为空"></el-input>
        </el-form-item>

        <el-form-item label="需要to_date的字段集合" prop="name" style="width: 800px">
            <el-input v-model="sqlExcute.toDateFields" placeholder="[英文逗号“,”分割,例如:'字段1','字段2']可为空"></el-input>
        </el-form-item>

        <el-form-item label="需要to_char的字段集合" prop="name" style="width: 800px">
            <el-input v-model="sqlExcute.toCharFields" placeholder="[英文逗号“,”分割,例如:'字段1','字段2']可为空"></el-input>
        </el-form-item>

        <el-form-item label="源文件" prop="name" style="width: 800px">
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请选择文件" id="fileNameInput" autocomplete="off"
                       class="layui-input" disabled="disabled" title="不可编辑"
                       style="width: 600px;margin-left: -110px;" v-model="fileName">

                <form action="/utils/sql/sqlExecute" method="post" enctype="multipart/form-data"
                      style="position: absolute;top: 0px; margin-left: 200px;">
                    <input type="file" multiple="multiple" name="file" @change="inputFileChange">
                </form>
            </div>
        </el-form-item>

        <el-form-item label="生成目录" prop="name" style="width: 800px">
            <el-input v-model="sqlExcute.target" placeholder="[为空则为源文件目录下]"></el-input>
        </el-form-item>

        <el-form-item label="是否是新增" prop="resource">
            <el-radio-group v-model="sqlExcute.isInsert">
                <el-radio label="是[insert语句]" :label=true></el-radio>
                <el-radio label="否[update语句]" :label=false></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="uploadFileFunc('sqlForm')">SQL批量生成</el-button>
            <el-button @click="resetForm('sqlForm')">重置</el-button>
        </el-form-item>
    </el-form>

</div>
<script src="../plugins/layui/src/layui.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app1',
        data: {
            sqlExcute: {
                tableName: "user_info",//
                isInsert: false,//
                target: "",//
                whereFields: [],//
                toDateFields: [],//
                toCharFields: [],//
            },
            resourceFile: '',
            fileName: "",
        },
        created() {
        },
        methods: {
            uploadFileFunc() {
                var formData = new FormData();
                formData.append("params", JSON.stringify(this.sqlExcute));
                formData.append("file", this.resourceFile);
                axios.post("/utils/sql/sqlExecute", formData).then((response) => {
                    if (response.data.flag) {
                        this.sqlExcute = response.data.data;
                        this.notifySuccess();
                    } else {
                        this.notifyError(response);
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            notifySuccess() {
                this.$notify({
                    title: '成功',
                    message: '处理成功，请耐心等待结果！',
                    type: 'success'
                });
            },
            notifyError(response) {
                this.$notify({
                    title: '失败',
                    message: response.data.message,
                    type: 'error'
                });
            },
            inputFileChange(e) {
                let file = e.target.files[0];
                this.fileName = file.name + '-大小：' + (file.size / 1024 / 1024).toFixed(2) + 'M';
                this.resourceFile = file;
            },
        }
    })
</script>
</body>
</html>